<button mat-button [routerLink]="'..'"><i class="fas fa-chevron-left"></i> Runtimes</button>

<h1>Runtime</h1>

<ng-container *ngIf="runtime|async as runtime; else loadingOrError">

  <h2>{{$any(runtime).specName + '-' + $any(runtime).specVersion}}</h2>

  <h3>Pallets</h3>

  <table mat-table [dataSource]="(pallets | async) || []" [trackBy]="trackPallet">

    <ng-container matColumnDef="icon">
      <th mat-header-cell *matHeaderCellDef class="mat-cell--icon-cell"></th>
      <td mat-cell *matCellDef>
        <i class="fas fa-cog"></i>
      </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let pallet">
        <a [routerLink]="'pallet/' + pallet.pallet">{{pallet.pallet}}</a>
      </td>
    </ng-container>

    <ng-container matColumnDef="events">
      <th mat-header-cell *matHeaderCellDef>Events</th>
      <td mat-cell *matCellDef="let pallet">
        {{pallet.countEvents}}
      </td>
    </ng-container>

    <ng-container matColumnDef="calls">
      <th mat-header-cell *matHeaderCellDef>Calls</th>
      <td mat-cell *matCellDef="let pallet">
        {{pallet.countCallFunctions}}
      </td>
    </ng-container>

    <ng-container matColumnDef="storage">
      <th mat-header-cell *matHeaderCellDef>Storage</th>
      <td mat-cell *matCellDef="let pallet">
        {{pallet.countStorageFunctions}}
      </td>
    </ng-container>

    <ng-container matColumnDef="constants">
      <th mat-header-cell *matHeaderCellDef>Constants</th>
      <td mat-cell *matCellDef="let pallet">
        {{pallet.countConstants}}
      </td>
    </ng-container>

    <ng-container matColumnDef="details">
      <th mat-header-cell *matHeaderCellDef class="mat-cell--details-link-cell"></th>
      <td mat-cell *matCellDef="let pallet">
        <a [routerLink]="'pallet/' + pallet.pallet"><span class="material-icons">chevron_right</span></a>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="visibleColumns.pallets; sticky: true"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: visibleColumns.pallets"></tr>

  </table>

  <ng-container *ngIf="(fetchPalletsStatus | async) as status">
    <p *ngIf="status === 'loading'">Loading...</p>
    <p *ngIf="status === 'error'">Could not fetch runtime pallets.</p>
  </ng-container>

</ng-container>


<ng-template #loadingOrError>
  <ng-container *ngIf="(fetchRuntimeStatus | async) as status">
    <p *ngIf="status === 'loading'">Loading...</p>
    <p *ngIf="status === 'error'">Could not fetch runtime.</p>
  </ng-container>
</ng-template>
